<template>
  <BaseOperateTable
    ref="refPage"
    :show-selection="false"
    :header="columns"
    :button-list="{}"
    :query-url="queryUrl"
    :data-filter="tabelDataFilter"
    @query="query"
    @reset="resetCondition">
    <template v-slot:condition>
       <div>操作时间：
        <a-range-picker
          v-model:value="createTimeRange"
          style="width:200px"
          format="YYYY-MM-DD"
          @change="onCreateTimeRangeChange" />
      </div>
      <div>操作人：
        <a-input
          v-model:value="condition.operName"
          :allow-clear="true"
          placeholder="请输入操作人"/>
      </div>
    </template>
  </BaseOperateTable>
</template>

<script setup>
import { ref, reactive } from 'vue'
import BaseOperateTable from '@/components/BaseOperateTable.vue'
import { BasePath } from '@/api/request'
import moment from 'moment'

const refPage = ref(null) // 表格实例
/** ==========表格模块========== */
const queryUrl = ref(`${BasePath}/operLog/pagelist`) // 分页查询接口URL

/** 表格标题栏配置 */
const columns = ref([
  {
    title: 'IP地址',
    dataIndex: 'operIp',
    width: 140,
    ellipsis: true
  },
  {
    title: '操作系统',
    dataIndex: 'operSystem',
    width: 140,
    ellipsis: true
  },
  {
    title: '操作对象',
    dataIndex: 'title',
    width: 140,
    ellipsis: true
  },
  {
    title: '操作功能',
    dataIndex: 'businessType',
    width: 140,
    ellipsis: true
  },
  {
    title: '操作结果',
    dataIndex: 'statusLabel',
    width: 140,
    ellipsis: true
  },
  {
    title: '操作URL',
    dataIndex: 'operUrl',
    width: 280,
    ellipsis: true
  },
  {
    title: '操作人',
    dataIndex: 'operName',
    width: 140,
    ellipsis: true
  },
  {
    title: '操时时间',
    dataIndex: 'operTimeLabel',
    width: 280,
    ellipsis: true
  }
])

/** 表格数据过滤 */
const tabelDataFilter = (rows) => {
  const result = []
  rows.forEach((item) => {
    let i = { ...item }
    i.rstatusLabel = i.status === 0?'成功':'失败'
    i.operTimeLabel = moment(new Date(i.operTime)).format('YYYY-MM-DD HH:mm:ss')
    result.push(i)
  })
  return result
}


/** ========== Condition ========== */
const createTimeRange = ref([])
// 查询条件
const condition = reactive({
  startTime: undefined,
  endTime: undefined,
  operName: undefined
})

/** 重置条件 */
const resetCondition = () => {
  condition.startTime = undefined
  condition.endTime = undefined
  condition.operName = undefined
  createTimeRange.value = []
}

/** 操作时间改变事件 */
const onCreateTimeRangeChange = (v1, v2) => {
  if (v2.length === 2) {
    let[startTime, endTime] = v2
    condition.startTime = v1.length?(startTime + ' 00:00:00') : undefined
    condition.endTime = v1.length?(endTime + ' 23:59:59') : undefined
  }
}

/** 点击查询按钮后，进行表格查询 */
const query = () => {
  refPage.value.queryByCondition(condition, true)
}

</script>
<script>
export default {
  name: 'log'
}
</script>